<template>
    <div>
     <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="500" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search" label-width="110px" class="demo-ruleForm">

            <el-form-item label="记录日期" style="margin-bottom: 0;">
                    <el-date-picker
                v-model="search.time"
                type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                placeholder="选择日期">
                </el-date-picker>
                </el-form-item>
              <el-button type="primary" @click="searchBtn"  class="text-right" style="float:right;">确认</el-button>
              <el-button type="primary" @click="cleanSearch"  align="right" style="float:right;margin-right:20px;">重置</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
      </el-col>
    </el-row>

    <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading" >
            <el-table-column prop="id" v-if="false"></el-table-column>
            <el-table-column prop="belongGxDesc" label="工序"  sortable min-width="60"></el-table-column>
            <el-table-column prop="name" label="机床" sortable min-width="100"></el-table-column>
            <el-table-column prop="date" label="记录日期" sortable  min-width="140"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog(scope.row)" type="text" size="mini">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <!-- 基础信息编辑 -->
        <el-dialog  width="1000px" center :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
            <el-tabs v-model="dialog.activeName" >
             <el-tab-pane label="工序详情" name="1">
               <el-form :inline="true" class="demo-form-inline"  label-position="right" label-width="150px" :model="dialog.formDate">

                <el-form-item label="工序" >
                    <el-input v-model="dialog.formDate.belongGxDesc"></el-input>
                </el-form-item>

                <el-form-item label="机床" >
                    <el-input v-model="dialog.formDate.name"></el-input>
                </el-form-item>


                <el-form-item label="记录日期" >
                    <el-input v-model="dialog.formDate.date"></el-input>
                </el-form-item>

            </el-form>

             </el-tab-pane>

              <el-tab-pane label="操作者记录" name="2">
               <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="150px">

                <el-table :data="operatorTabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;"
                :header-cell-style="getRowClass" v-loading="loading" >
                    <el-table-column prop="id" v-if="false"></el-table-column>
                    <el-table-column prop="empId"  v-if="false" label="操作者"  sortable min-width="100"></el-table-column>
                    <el-table-column prop="empName" label="操作者"  sortable min-width="100"></el-table-column>
                    <el-table-column prop="beginTimeDesc" label="开始时间" sortable  min-width="140"></el-table-column>
                    <el-table-column prop="endTimeDesc" label="结束时间" sortable  min-width="140"></el-table-column>
                    <el-table-column prop="workEndDesc" label="状态" sortable  min-width="100"></el-table-column>
                    <el-table-column prop="workMac" label="机床"  v-if="false" sortable  min-width="100"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" width="100">
                        <template slot-scope="scope">
                            <el-button @click="isShowOperatorDialog(scope.row)" type="text" size="mini">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>



            </el-form>

             </el-tab-pane>

             </el-tabs>
        </el-dialog>


        <el-dialog  width="1100px" center :visible.sync="operaotrDialog.isShow" :close-on-click-modal="false" v-dialogDrag>
            <el-tabs v-model="operaotrDialog.activeName" >
             <el-tab-pane label="生产工作记录" name="1">


    <el-table :data="operatorDetailTabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;"
        :header-cell-style="getRowClass" v-loading="loading"  :row-class-name="tableRowClassName" >
            <el-table-column prop="id" v-if="false"></el-table-column>
            <el-table-column prop="recordTypeDesc" label="记录类型" sortable min-width="140"></el-table-column>
            <el-table-column prop="belongGxDesc" label="工序"  sortable min-width="60"></el-table-column>
            <!-- <el-table-column prop="macName" label="机床" sortable min-width="100"></el-table-column> -->
            <el-table-column prop="matterCode" label="物料编号" sortable  min-width="100"></el-table-column>
            <el-table-column prop="materialName" label="物料类型" sortable  min-width="100"></el-table-column>
            <el-table-column prop="productTotal" label="产品数量" sortable  min-width="100"></el-table-column>
            <el-table-column prop="productWeight" label="产品重量" sortable  min-width="100"></el-table-column>
            <el-table-column prop="boxSerial" label="装箱顺序号" sortable  min-width="100"></el-table-column>
            <el-table-column prop="empName" label="记录人"  sortable min-width="80"></el-table-column>
            <el-table-column prop="recordTimeDesc" label="记录时间" sortable  min-width="140"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="isShowODDialog(scope.row,'update')" type="text" size="mini">详情</el-button>
                    <el-button @click="isShowODDialog(scope.row,'delete' )" type="text" size="mini">删除</el-button>
                    <el-button @click="printQrCode(scope.row,scope.$index)" v-if="scope.row.boxSerial != null && scope.row.boxSerial != '' && scope.row.boxSerial != undefined " type="text" size="mini">打印二维码</el-button>
                </template>
            </el-table-column>
        </el-table>



             </el-tab-pane>

             </el-tabs>
        </el-dialog>


 <!-- 基础信息编辑 -->
        <el-dialog  width="800px" center :visible.sync="odDialog.isShow" :close-on-click-modal="false" v-dialogDrag>
            <el-tabs v-model="odDialog.activeName"  >
             <el-tab-pane label="记录详情" name="1">
               <el-form :inline="true" class="demo-form-inline" ref="ruleform" :rules="rules"  label-position="right" label-width="150px" :model="odDialog.formDate">

                <el-form-item label="记录类型" >
                    <el-input v-model="odDialog.formDate.recordTypeDesc"></el-input>
                </el-form-item>

                <el-form-item label="工序" >
                    <el-input v-model="odDialog.formDate.belongGxDesc"></el-input>
                </el-form-item>

                <el-form-item label="机床" >
                    <el-input v-model="odDialog.formDate.macName"></el-input>
                </el-form-item>

                <el-form-item label="物料编号" >
                    <el-input v-model="odDialog.formDate.matterCode"></el-input>
                </el-form-item>
                <el-form-item label="物料名称" >
                    <el-input v-model="odDialog.formDate.materialName"></el-input>
                </el-form-item>

                <el-form-item label="产品数量" >
                    <el-input v-model="odDialog.formDate.productTotal"></el-input>
                </el-form-item>
                <el-form-item label="产品重量(KG)" >
                    <el-input v-model="odDialog.formDate.productWeight"></el-input>
                </el-form-item>
                <el-form-item label="装箱序号" >
                    <el-input v-model="odDialog.formDate.boxSerial"></el-input>
                </el-form-item>

                <el-form-item label="记录人" >
                    <el-input v-model="odDialog.formDate.empName"></el-input>
                </el-form-item>

                <el-form-item label="记录时间" >
                    <el-input v-model="odDialog.formDate.recordTimeDesc"></el-input>
                </el-form-item>
                <el-form-item label="备注" >
                    <el-input v-model="odDialog.formDate.remark" type="textarea" ></el-input>
                </el-form-item>
                <el-form-item  class="form-item-block text-center">
                   <el-button type="primary" @click="onSubmit()">确认</el-button>
                </el-form-item>
                  <el-form-item label="记录照片" >
                      <div    v-for="item in odDialog.formDate.recordImgs" :key="item.id"  style="width: 600px;height: 600px;float:center;" >
                          <img :src="item.image"  style=" width:auto;height: auto; max-width: 100%;max-height: 100%;float:center;"  />
                          <!-- <el-image  style="width:200px;height: 320px" :src="item.image"  :preview-src-list="imageList"></el-image> -->
                      </div>
                  </el-form-item>
            </el-form>

             </el-tab-pane>

             </el-tabs>
        </el-dialog>





              <div id="qrcodep" style="border:1px solid white;">
              <div id="qrcode" style="position:absolute;right:32px;top:25px;" >
              </div>
                <div id="name" style="text-align: center;margin-top:7px;font-size:13px;"></div>
              </div>
    </div>

</template>
<script>
import QRCode from 'qrcodejs2'
import kzHttp from '@/axios/kzHttp.js'
import cgbHttp from '@/axios/cgbHttp.js'
export default {
    data(){
        return {
            imageList:[],
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            loading:false,/**加载参数 */
            tabaleData:[],/**表格数据列表 */
            operatorTabaleData:[],/**操作者表格数据列表 */
            operatorDetailTabaleData:[],/**操作者详细表格数据列表 */
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{
                title:'',
                type:'',
                isShow:false,
                formDate:{},
                activeName:'1',
            },
            odDialog:{
                title:'',
                type:'',
                isShow:false,
                formDate:{},
                activeName:'1',
            },
            operaotrDialog:{
                title:'操作者记录详情',
                type:'',
                isShow:false,
                formDate:{},
                activeName:'1',
                empId:'',
                workMac:'',
                recordBeginTime:'',
                recordEndTime:'',
            },
            supplierList:[],
            search:{
                time:'',
                empName:null,
                matterCode:null,
                recordType:null,
                belongGx:null,
                machineId:null,
            },
            outStockTablelist:[],
            outStockDialog:{
                title:'',
                type:'',
                isShow:false,
                formData:{
                },

            },
            maskRecord:[],
            maskGx:[],
            maskMac:[],
        }
    },
    created(){
        let  self = this;
        self.getTableList();
    },
    methods:{
        getTableList(){
            let self = this,
            data={
               currentPage:self.pagination.currentPage,
               pageSize:self.pagination.pageSize,
               date:self.search.time,
            };
            kzHttp.getkzMachine(data).then(res=>{
                self.tabaleData=res.content.records
                self.pagination.total = res.content.total;
            })
        },
        getOperatorTabaleData(row){
            let self = this;
            kzHttp.getOperatorTabaleData(row.id,row.date).then(res=>{
                self.operatorTabaleData = res.content;
                console.log(self.operatorTabaleData);
            })
        },
        searchBtn(){
            this.pagination.currentPage=1;
            this.getTableList();
        },
        cleanSearch(){
            this.search.time = '';
        },
        handleSizeChange(size){
            this.pagination.pageSize = size;
            this.getTableList();
        },
        handleCurrentChange(current){
            this.pagination.currentPage = current;
            this.getTableList();
        },
        isShowDialog(row){
            let self = this;
            self.dialog.title = '详情';
            self.dialog.isShow = true;
            self.dialog.formDate=row;
            self.getOperatorTabaleData(row);

        },
        isShowODDialog(row,type){
            let self = this;
             switch(type){
                  case 'update':
                    self.odDialog.title = '详情';
                     self.odDialog.isShow = true;
                    self.odDialog.formDate=row;
                      row.recordImgs.forEach(item=>{
                        self.imageList.push(item.image);
                       }) ;break;
                  case 'delete':
                      self.$confirm('是否删除?', '提示', {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        confirmButtonClass:'bg-warning noBorder',
                        type: 'warning'
                     }).then(() => {
                        kzHttp.deleteMaskWorkRecord(row.id).then(res=>{
                                self.$message.success('删除成功!');
                                self.getOperatorDetailTabaleData();
                            })
                        }).catch(()=> {});
                        break;
             }
        },
        onSubmit(){
            let self =this
            kzHttp.updateMaskWorkRecord(self.odDialog.formDate).then(res=>{
              self.odDialog.isShow=false;
              self.getOperatorDetailTabaleData();
          })
        },
        isShowOperatorDialog(row){
            let self = this;
            self.operaotrDialog.isShow = true;
            self.operaotrDialog.activeName = "1";
            // self.dialog.formDate=row;

            let endTime_ = null;
            if(row.endTimeDesc === '-'){
                let temp = row.beginTimeDesc.substring(0,10);
                endTime_ = temp + " 23:59:59";
            }else{
                endTime_ = row.endTimeDesc;
            }

            self.operaotrDialog.empId=row.empId;
            self.operaotrDialog.workMac=row.maskMac;
            self.operaotrDialog.recordBeginTime=new Date(row.beginTimeDesc);
            self.operaotrDialog.recordEndTime=new Date(endTime_);
            // self.getOperatorTabaleData(row);
            let data={
               currentPage:self.pagination.currentPage,
               pageSize:1000,
               empId:row.empId,
               workMac:row.workMac,
               recordBeginTime:new Date(row.beginTimeDesc),
               recordEndTime:new Date(endTime_),
            };
            kzHttp.selectRecordPageByCondition(data).then(res=>{
                self.operatorDetailTabaleData = res.content.page.records;
            })
        },
        getOperatorDetailTabaleData(){
            let self=this;
            let data={
               currentPage:self.pagination.currentPage,
               pageSize:1000,
               empId:self.operaotrDialog.empId,
               workMac:self.operaotrDialog.workMac,
               recordBeginTime: self.operaotrDialog.recordBeginTime,
               recordEndTime:self.operaotrDialog.recordEndTime,
            };
             kzHttp.selectRecordPageByCondition(data).then(res=>{
                self.operatorDetailTabaleData = res.content.page.records;
            })
        },

        showoutStockDialog(type,row){
           let self = this;
            self.outStockDialog.type=type;
            switch(type){
                case 'insert':
                self.outStockDialog.isShow = true;
                self.outStockDialog.title = '新增出库信息'
                break;
                case 'update':
                     self.outStockDialog.isShow=true;
                     self.outStockDialog.title = '修改出库信息';
                     self.outStockDialog.formData=JSON.parse(JSON.stringify(row));break;
                case 'delete':
                    self.$confirm('是否删除?', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    confirmButtonClass:'bg-warning noBorder',
                    type: 'warning'
                }).then(() => {

                }).catch(()=> {});
                    break;
            }
        },
        onSubmitOutStock(){
          let self=this;
           self.$refs.ruleOutStock.validate((valid) => {
             if(valid){
                 if(self.outStockDialog.type==='insert'){
                     self.outStockDialog.formData.pid=self.dialog.formDate.id;
                     kzHttp.insertkzMaterialDetail(self.outStockDialog.formData).then(res=>{
                          self.$message.success(`${self.outStockDialog.title}成功`);
                            self.outStockDialog.isShow = false;
                            self.getOutStockTableList();
                     })
                 }
                 if(self.outStockDialog.type==='udpate'){
                     kzHttp.updatekzMaterialDetail(self.outStockDialog.formData).then(res=>{
                          self.$message.success(`${self.outStockDialog.title}成功`);
                            self.outStockDialog.isShow = false;
                            self.getOutStockTableList();
                     })
                 }

             }else{
                this.$message({
                 message: '提交失败',
                 type: 'warning'
                });
                return false;
             }
           })
        },
        submitList(){
            let self = this;
            self.$refs.ruleform.validate((valid)=>{
                if(valid){
                    let type = self.dialog.title.indexOf("新增") > -1 ? "insert" : "update";
                    if(type==="insert"){
                        kzHttp.insertkzMaterial(self.dialog.formDate).then(res => {
                            self.$message.success(`${self.dialog.title}成功`);
                            self.dialog.isShow = false;
                            self.getTableList();
                        },error => {
                            self.$message.error(`${self.dialog.title}失败`);
                        });
                    }
                    if(type==="update"){
                        kzHttp.updatekzMaterial(self.dialog.formDate).then(res => {
                            self.$message.success(`${self.dialog.title}成功`);
                            self.dialog.isShow = false;
                            self.getTableList();
                        },error => {
                            self.$message.error(`${self.dialog.title}失败`);
                        });
                    }
                }else{
                     this.$message({
                        message: '提交失败',
                        type: 'warning'
                        });
                    return false;
                }
            })

        },
        printQrCode(row){


         let self=this;
          kzHttp.printWorkQrCode(row.id).then(res=>{
              let statusCode_ = res.statusCode;
              if(statusCode_ === "200"){
                  self.$message.success(`打印成功`);
              }else{
                  this.$message({
                        message: res.desc,
                        type: 'warning'
                    });
              }
          })


        //     let self=this;
        //    self.$nextTick(function () {
        //             let qrcode = new QRCode("qrcode", {
        //                 width: 75,
        //                 height: 75,
        //                 text: row.belongGxDesc + "-" + row.boxSerial,
        //                 colorDark: "#000000",
        //                 colorLight: "#ffffff"
        //             });
        //         });
        //    setTimeout(()=>{
        //   document.getElementById("name").innerHTML=row.belongGxDesc + "-" + row.boxSerial;
        //   self.$print(document.getElementById("qrcodep"));
        //    document.getElementById("qrcode").innerHTML = "";
        //    document.getElementById("name").innerHTML="";
        //    },200)
        },
        handleClick(){
          let self = this;
            switch(self.dialog.activeName){
                //出库信息
                case '2':self.getOutStockTableList();
                 break;
            }
        },
        getOutStockTableList(){
         let self=this;
          kzHttp.getkzMaterialDetailByPid(self.dialog.formDate.id).then(res=>{
              self.outStockTablelist=res.content;
          })
        },
        querySaleProductAsync(queryString, callback){
            cgbHttp.searchMaterialKeyWord({name:queryString?queryString:''}).then(res=>{
                res.content.forEach(item=>{
                item.value = item.type+"_"+item.name;
                })
                callback(res.content);
            })
        },
        queryhandleSelect1(item){
            let self=this;
           self.dialog.formDate.material=item.id;
           let a= item.value.split("_");
            self.dialog.formDate.cgMaterial.type=a[0];
            //供应商列表
               cgbHttp.allCgSupplierByMid(item.id).then(res=>{
                 self.supplierList=res.content;
               })
        },
         tableRowClassName({row}){
             console.log(row.state);
            if(row.state === 0){
                return 'warning-row';
            }
        }

    }
}
</script>
<style scoped>
.icon-circle{
    line-height: 100%;
    font-size:18px;
}
.myImage{
   width:auto;
   height: auto;
    max-width: 100%;
    max-height: 100%;
}
 .el-table .warning-row {
 background: rgba(0,255,255, 0.5);
  }
</style>
